// 普通搜索框（改版）
export const addcommonSearchchange = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addcommonSearchchange', {
        model: {
            defaults: {
                name: 'addcommonSearchchange',
                droppable: true,
                attributes: {
                    class: 'common-search-div'
                },
                components:[{
                    type: 'div',
                    attributes:{class:'allDiv'},
                    components: [
                        {
                            type: 'div',
                            attributes: {
                                class: 'searchDiv'
                            },
                            components: [
                                {
                                    tagName: 'input',
                                    attributes: {
                                        class: 'common-search',
                                        placeholder: "请输入搜索关键词"
                                    }
                                },
                                {
                                    type: 'button',
                                    content: '搜索',
                                    attributes: {
                                        class: 'searchbutton'
                                    }
                                },
                            ]
    
                        },
                        {
                            type: 'div',
                            attributes: {
                                class: 'linkDiv'
                            },
                            components: [
                                {
                                    type: 'span',
                                    content: '销售展示系统',
                                    attributes: {
                                        class:'linkDiv-span'
                                    }
                                },
                                {
                                    type: 'span',
                                    content: '族库',
                                    attributes: {
                                      class:'linkDiv-span'                                      
                                    }
                                },
                                {
                                    type: 'span',
                                    content: '智慧工地',
                                    attributes: {
                                       class:'linkDiv-span'
                                    }
                                },
                                {
                                    type: 'span',
                                    content: '智慧水务',
                                    attributes: {
                                        class:'linkDiv-span'
                                    }
                                },
                            ]
                        }
                    ],
                }],
                
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    let history = [
                        { inputContent: '金银花', resultCount: '100' },
                        { inputContent: '扑克牌', resultCount: '100' },
                        { inputContent: '水藻', resultCount: '100' },
                        { inputContent: '金元宝', resultCount: '100' },
                        { inputContent: 'teamco', resultCount: '100' },
                        { inputContent: '达索', resultCount: '100' },
                        { inputContent: '艾三维', resultCount: '100' },
                        { inputContent: '今日说法', resultCount: '100' },
                        { inputContent: '产品介绍，请给我一套最简单的方案', resultCount: '100' },
                        { inputContent: '流式布局', resultCount: '100' },
                        { inputContent: '响应式', resultCount: '100' },
                        { inputContent: '商品价位', resultCount: '100' },
                        { inputContent: '数码产品', resultCount: '100' },
                        { inputContent: '产品的维护和售后', resultCount: '100' },
                        { inputContent: '产品有没有更详细的介绍', resultCount: '100' },
                        { inputContent: '艾三维技术', resultCount: '100' },
                    ]

                    let searchInput = thx.getElementsByClassName('common-search')[0];
                    let searchBtn = thx.getElementsByClassName('common-search-img')[0];
                    let historyBox = thx.getElementsByClassName('common-search-history')[0];

                    // 搜索按钮点击
                    searchBtn.onclick = () => {
                        const key = searchInput.value;
                        if (key === '') {
                            alert('输入内容不能为空！');
                        } else {
                            history.push({ inputContent: key, resultCount: '100' })
                            alert(`搜索的内容为${key}`)
                        }
                    }

                    // 输入框点击
                    searchInput.onfocus = () => {
                        searchInput.placeholder = '';
                    }

                    let curInput = null;

                    // 监听输入
                    searchInput.oninput = () => {
                        historyBox.style.display = 'flex';
                        let xx = searchInput.value.trim();
                        setTimeout(function () {
                            if (xx === '' || xx.startsWith(curInput)) {
                                curInput = xx;
                                return;
                            }
                            curInput = xx;
                            historyBox.innerHTML = '';
                            history.filter(({ inputContent, resultCount }) => {
                                if (inputContent.startsWith(xx)) {
                                    let itemDiv = document.createElement('div');
                                    let itemSpan = document.createElement('span');
                                    let itemR = document.createElement('span');
                                    itemDiv.classList.add('common-search-history-item');
                                    itemR.classList.add('common-search-resultCount');
                                    itemDiv.dataset.text = inputContent;
                                    itemSpan.dataset.text = inputContent;
                                    itemR.dataset.text = inputContent;
                                    itemSpan.innerText = inputContent;
                                    itemR.innerText = `${resultCount}个结果`;
                                    itemDiv.appendChild(itemSpan);
                                    itemDiv.appendChild(itemR);
                                    historyBox.appendChild(itemDiv);
                                    return true;
                                } else {
                                    return false;
                                }
                            });
                            // for(let i = 0; i < history.length; i++) {
                            //     // result.push(aim.find(item => item.name = nameArr[i]))

                            // }
                        }, 500)
                    }

                    // 输入框失焦
                    searchInput.onblur = () => {
                        setTimeout(function () {
                            historyBox.style.display = 'none';
                            searchInput.placeholder = '请输入搜索关键词';
                        }, 70)
                    }

                    // 搜索提示内容被点击
                    historyBox.onclick = (e) => {
                        searchInput.value = e.target.dataset.text;
                    }
                },
                styles: `
                    .common-search-div{
                        background-image: url('https://cdn4.codesign.qq.com/prototypes/2024/07/18/RG6X024kXN1P07ZxEPB18/1dtjmlls18wjnexl/81634b62e02fca54d01e2f56c25d5a9f.png');
                        background-repeat: no-repeat;
                        background-position: center; 
                        background-size:cover;
                        height: 140px;
                    }
                    .allDiv{   
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        height: 100%;
                        margin-left: 4%;
                    }
                    .searchDiv{
                        display: flex;
                    }
                    .linkDiv{
                        display: flex;
                    }
                    .linkDiv-span{
                        margin: 5px;
                        color: gray;
                    }
                    .common-search{
                        border-radius: 15px;
                        width: 350px;
                        height: 40px;
                        border-style: none;
                    }
                    .common-search::-webkit-input-placeholder {
                        position: relative;
                        left: 13px;
                    }
                    .searchbutton{
                        width: 90px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 20px;
                        border-style: none;
                        background-color: #169bd5;
                        color: white;
                        font-size: 16px;
                        cursor: pointer;
                        text-align: center;
                    }
                `},
            init() {

            },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-commonSearchchange', {
        label: '普通搜索栏(改版)',
        category: '其他类',
        media: `<svg t="1720776784632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29487" width="30" height="30"><path d="M533.7088 341.333333H102.4a68.266667 68.266667 0 0 0-68.266667 68.266667v157.013333a68.266667 68.266667 0 0 0 68.266667 68.266667h819.2a68.266667 68.266667 0 0 0 68.266667-68.266667V409.6a68.266667 68.266667 0 0 0-68.266667-68.266667H533.7088z m383.522133 248.900267h-805.546666a34.133333 34.133333 0 0 1-34.133334-34.133333v-136.533334a34.133333 34.133333 0 0 1 34.133334-34.133333h805.546666c15.086933 0 27.306667 12.219733 27.306667 27.306667v150.186666a27.306667 27.306667 0 0 1-27.306667 27.306667z" p-id="29488"></path><path d="M170.666667 409.6a68.266667 68.266667 0 0 1 48.196266 116.599467l37.000534 38.2976c1.774933 4.778667 0.955733 8.6016-2.321067 11.537066a11.332267 11.332267 0 0 1-11.6736 2.2528l-37.2736-41.1648A68.266667 68.266667 0 1 1 170.666667 409.6z m0 20.48a47.786667 47.786667 0 1 0 0 95.573333 47.786667 47.786667 0 0 0 0-95.573333z" p-id="29489"></path></svg>`,
        content: {
            type: 'addcommonSearchchange'
        },
    });
};